<html>
<head>
<title>15 puzzles</title>
<style>
	.puzzle td{width:30px; height:30px; vertical-align:middle; text-align:center;}
	.puzzle a{width:28px; height:28px; font-weight:bold; font-size:18px; text-decoration:none;}
</style>
</head>

<body>
<table style="display: inline; width: 180px; height: 180px; text-align:center; vertical-align:middle;" cellspacing="1" cellpadding="1" summary="" border="1">
  <tbody>
    <tr>
      <td>1</td>
      <td bgcolor="#999999">2</td>
      <td>3</td>
      <td bgcolor="#999999">4</td>
    </tr>
    <tr>
      <td bgcolor="#999999">5</td>
      <td>6</td>
      <td bgcolor="#999999">7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td bgcolor="#999999">10</td>
      <td>z&nbsp;</td>
      <td bgcolor="#999999">&nbsp;</td>
    </tr>
    <tr>
      <td bgcolor="#999999">&nbsp;</td>
      <td>&nbsp;</td>
      <td bgcolor="#999999">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
<table class='puzzle' cellpadding="1" cellspacing="1" border="1">
	<tr><td onClick="move(1,1);"><a href='#' onclick='return false;' id='s1'>1</a></td><td onClick="move(1,2);"><a href='#' onclick='return false;' id='s2'>2</a></td><td onClick="move(1,3);"><a href='#' onclick='return false;' id='s3'>3</a></td><td onClick="move(1,4);"><a href='#' onclick='return false;' id='s4'>4</a></td></tr>
	<tr><td onClick="move(2,1);"><a href='#' onclick='return false;' id='s5'>5</a></td><td onClick="move(2,2);"><a href='#' onclick='return false;' id='s6'>6</a></td><td onClick="move(2,3);"><a href='#' onclick='return false;' id='s7'>7</a></td><td onClick="move(2,4);"><a href='#' onclick='return false;' id='s8'>9</a></td></tr>
	<tr><td onClick="move(3,1);"><a href='#' onclick='return false;' id='s9'>9</a></td><td onClick="move(3,2);"><a href='#' onclick='return false;' id='s10'>10</a></td><td onClick="move(3,3);"><a href='#' onclick='return false;' id='s11'>11</a></td><td onClick="move(3,4);"><a href='#' onclick='return false;' id='s12'>12</a></td></tr>
	<tr><td onClick="move(4,1);"><a href='#' onclick='return false;' id='s13'>13</a></td><td onClick="move(4,2);"><a href='#' onclick='return false;' id='s14'>14</a></td><td onClick="move(4,3);"><a href='#' onclick='return false;' id='s15'>15</a></td><td onClick="move(4,4);"><a href='#' onclick='return false;' id='s16'> </a></td></tr>
</table>




<script>
var s = new Array();
var curX = 4, curY = 4;
var count = 0;

for (i = 1; i <= 16; i++)	s[i] = document.getElementById('s'+i);

function move(x, y) {
	var disX = x - curX, disY = y - curY;
	var cur = 4*(curX - 1) + curY, p = 4*(x - 1) + y;
	
	if ( (Math.abs(disX) == 1 && disY == 0) || (disX == 0 && Math.abs(disY) == 1) ) {
		s[cur].innerHTML = s[p].innerHTML;
		s[p].innerHTML = '';
		
		count ++;
		curX = x, curY = y;
	}
}

function moveTo(xF, yF, xE, yE) {
	var xCur = curY, yCur = curY;
	
	if ( (Math.abs(xF - xE) == 1 && yF == yE) || (xF == xE && Math.abs(yF - yE) ) {
		if (xF > xE)
	}
}

function spaceMove(xEnd, yEnd, xProb, yProb) {
	var xCur = curY, yCur = curY;
	
	if (xCur == xEnd && yCur == yEnd)	return ;
	
	if (xCur != xEnd) {
		if (xCur > xEnd) {
			if (xCur - 1 == xProb && yCur == yProb) {
				
			}
		} else {
		
		}
	}
}

</script>


</body>
